<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>前五个搜索</title>
</head>
<body>
    <!-- 对于push()和pop() 当您在网络应用程序中维护当前活动项目的记录时。 例如，在动画场景中，您可能会有一系列表示当前显示的背景图形的对象，并且由于性能或混乱原因，您可能只需要一次显示50个。 当创建新对象并将其添加到数组中时，可以从数组中删除较旧的对象以维护所需的数字。

在这个例子中，我们将展示一种更简单的使用方法 - 在这里我们给你一个假的搜索网站，一个搜索框。 这个想法是，当在搜索框中输入时，列表中会显示5个先前的搜索字词。 当列表项目数量超过5时，每当新项目被添加到顶部时，最后一个项目开始被删除，因此总是显示5个以前的搜索字词。 -->
<div class="output">
    <input type="text">
    <button>搜索</button>
    <ul></ul>
</div>
<script>
    var list = document.querySelector('.output ul');
    var searchInput = document.querySelector('.output input');
    var searchBtn = document.querySelector('.output button');

    list.innerHTML = '';

    var myHistory = [];

    searchBtn.onclick = function() {
    // we will only allow a term to be entered if the search input isn't empty
    if (searchInput.value !== '') {
        // number 1
        myHistory.unshift(searchInput.value);
        // empty the list so that we don't display duplicate entries
        // the display is regenerated every time a search term is entered.
        list.innerHTML = '';

        // loop through the array, and display all the search terms in the list
        for (var i = 0; i < myHistory.length; i++) {
        var itemText = myHistory[i];
        var listItem = document.createElement('li');
        listItem.textContent = itemText;
        list.appendChild(listItem);
        }

        // If the array length is 5 or more, remove the oldest search term
        if (myHistory.length >= 5) {
        // number 2
        myHistory.pop();
        }

        // empty the search input and focus it, ready for the next term to be entered
        searchInput.value = '';
        searchInput.focus();
    }
    }

</script>
</body>
</html>